<template>
  <div style="overflow-y: scroll">
    <div style="margin-bottom: 20px" v-if="create">
      <a-button
        style="display: block; margin-left: auto"
        @click="openModal('新建')"
        >新建</a-button
      >
    </div>
    <a-table :rowKey="rowKey" v-bind="tableState" :pagination="false">
      <template #boolean="{ text }">{{ text ? "是" : "否" }}</template>
      <template #addon="{ record }">
        <slot name="addon" :record="record"></slot>
      </template>
      <template #action="{ record }"
        ><a-button type="link" v-if="!hideDelete" @click="handleDelete(record)"
          >删除</a-button
        >
        <a-button
          type="link"
          v-if="!hideEdit"
          @click="openModal('编辑', record)"
          >编辑</a-button
        ></template
      >
    </a-table>
    <a-modal v-bind="modalState" @ok="handleSubmit" @cancel="handleCancel">
      <a-form ref="formRef" :model="modalState.currentValue" :rules="rules">
        <slot name="form" :record="modalState.currentValue"></slot>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref, watch } from "vue";
import { message } from "ant-design-vue";

import * as api from "../api";
import { useStore } from "vuex";
const formRef = ref();
const changeEmit = defineEmits(["change"]);
const props = defineProps({
  rowKey: String,
  edit: Boolean,
  query: Object,
  hideDelete: Boolean,
  hideEdit: Boolean,
  create: {
    type: Boolean,
    default: true,
  },
  columns: Array,
  rules: Object,
  name: String,
  addon: Boolean,
  beforeUpdateFn: Function,
  params: {
    type: Object,
    default: () => ({}),
  },
});
const getList = () => {
  tableState.loading = true;
  destApi.list(props.query || {}).then((r) => {
    // 区分是从vuex返回还是接口
    const result = r.data ? r.data : r;
    tableState.dataSource = result;
    store.commit("setList", { name: props.name, data: result });
    tableState.loading = false;
  });
};
watch(() => props.query, getList);
const destApi = api[props.name];
const store = useStore();
const tableState = reactive({
  loading: false,
  dataSource: [],
  columns: props.columns,
});
props.addon &&
  tableState.columns.push({
    title: "附加",
    slots: { customRender: "addon" },
  });
const handleDelete = (record) => {
  destApi.delete(record).then((r) => {
    if (r.data.name === "SequelizeForeignKeyConstraintError") {
      message.error("此条数据被其他数据引用,禁止删除|存在外键引用");
    }
    getList();
  });
};
const modalState = reactive({
  visible: false,
  title: "",
  currentValue: {},
});
const openModal = async (title, record) => {
  modalState.title = title;
  modalState.visible = true;
  modalState.currentValue = record ? JSON.parse(JSON.stringify(record)) : {};
  changeEmit("change", JSON.parse(JSON.stringify(modalState.currentValue)));
  await nextTick();
};

const handleSubmit = async () => {
  await formRef.value.validate();
  await destApi.update({ ...modalState.currentValue, ...props.params });
  await getList();
  modalState.visible = false;
  formRef.value.resetFields();
};
const handleCancel = () => {
  modalState.visible = false;
  formRef.value.resetFields();
};
getList();
defineExpose({
  getList,
});
</script>

<style scoped></style>
